<template>
  <div class="header">
    <div class="top">
      <router-link class="left" to="mymenu">
        <div class="iconfont icon-zuojiantou"></div>
        <div class="back">返回</div>
      </router-link>
      <div class="right">购物袋</div>
      <div class="del" v-if="flag" @click="Del1()">编辑</div>
      <div class="del" v-else @click="Del2()">编辑中</div>
    </div>
    <div class="pic">
      <img src="@/assets/bagimges/shopbag_bg.png" alt="" />
    </div>
    <div class="box" v-if="user_token && !picurl">
      <div class="banner">
        <div class="guang-box">
          <van-empty
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="空空如也"
          />
          <router-link class="text-guang" to="mymenu"> 逛一逛 </router-link>
        </div>
      </div>
    </div>
    <div class="product" v-if="user_token && picurl">
      <div class="thing" v-for="(v, k) in picurl" :key="k">
        <van-checkbox-group class="left" v-model="result" ref="checkboxGroup">
          <van-checkbox
            class="button"
            value="v.checked"
            @click="selectGoods"
            v-model="v.checked"
            v-if="num == 1"
            :name="v.pid"
          ></van-checkbox>
        </van-checkbox-group>
        <div class="middle">
          <img :src="v.small_img" alt="" />
        </div>
        <div class="right">
          <div class="topname">{{ v.name }} {{ v.rule }}</div>
          <div class="enname">{{ v.enname }}</div>
          <div class="price">
            <div class="priceleft">￥ {{ v.price }}</div>
            <div class="priceright">
              <van-stepper v-model="value" class="bujin" />
            </div>
          </div>
          <div class="delbox">
            <van-submit-bar
              :price="3050"
              button-text="提交订单"
              v-if="flag"
              @submit="onSubmit"
            >
              <van-checkbox
                v-model="isAllChecked"
                @click="checkedAll"
                class="all"
                >全选</van-checkbox
              >
            </van-submit-bar>
            <van-submit-bar
              button-text="删除选项"
              class="shanchu"
              button-color="#1989fa"
              @click = "delCart"
              v-else
            >
              <van-checkbox
                v-model="isAllChecked"
                @click="checkedAll"
                class="all"
                >全选</van-checkbox
              >
            </van-submit-bar>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom" v-if="!user_token">
      <van-empty image="error" description="请先登录" />
      <router-link to="mylogin">
        <div class="button">登录</div>
      </router-link>
    </div>
    <div class="text">哎呀，没有数据可加载了！</div>
    <my-footer></my-footer>
    <van-tabbar route>
      <van-tabbar-item replace to="/mypage" class="iconfont icon-shouye"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/mymenu" class="iconfont icon-caidan"
        >菜单</van-tabbar-item
      >
      <van-tabbar-item replace to="/mycart" class="iconfont icon-gouwuche"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item
        replace
        to="/mylogin"
        class="iconfont icon-wodefill"
        v-if="!tokenString"
        >我的</van-tabbar-item
      >
      <van-tabbar-item
        replace
        to="/mymine"
        class="iconfont icon-wodefill"
        v-else
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>


<style lang="scss" scoped>
.header {
  .top {
    display: flex;
    .left {
      display: flex;
      height: 50px;
      line-height: 50px;
      margin-left: 10px;
      .back {
      }
    }
    .right {
      margin-left: 120px;
      height: 50px;
      line-height: 50px;
    }
    .del {
      margin-left: 100px;
      height: 50px;
      line-height: 50px;
    }
  }
  .pic {
    img {
      width: 100%;
    }
  }
  .box {
    .banner {
      img {
        width: 100%;
      }
      .text-guang {
        margin-left: 158px;
        font-weight: bold;
        color: #1989fa;
      }
    }
  }
  .product {
    .thing {
      display: flex;
      .left {
        width: 65px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        .button {
        }
      }
      .middle {
        display: flex;
        .radio {
        }
        img {
          width: 85px;
          height: 85px;
        }
      }
      .right {
        margin-left: 10px;
        .topname {
          font-size: 14px;
          color: #bc8b76;
        }
        .enname {
          color: #e0d1c6;
          font-size: 14px;
        }
        .price {
          display: flex;
          color: #1989fa;
          font-weight: bold;
          .priceright {
            .bujin {
              margin-left: 20px;
            }
          }
        }
        .delbox {
          position: relative;
          .shanchu {
            .all {
              position: absolute;
              left: 20px;
            }
          }
        }
      }
    }
  }
  .bottom {
    margin: 0 auto;
    a {
      .button {
        margin: 0 auto;
        text-align: center;
        width: 180px;
        height: 40px;
        line-height: 40px;
        background-color: #0c34ba;
        color: #fff;
        border-radius: 30px;
      }
    }
  }
  .text {
    text-align: center;
    color: #9a9a9b;
    font-size: 14px;
  }
}
</style>
<script>
import myFooter from "@/components/my-footer.vue";
import "@/assets/fonts/iconfont.css";
export default {
  name: "mycart",
  components: {
    myFooter,
  },
  data() {
    return {
      flag: true,
      user_token: null,
      tokenString: null,
      picurl: [],
      aa: true,
      value: 1,
      isAllChecked: false,
      result: [],
      datalist: [],
      num: 1,
      checked: [],
      sid:[],
    };
  },
  methods: {
    // 编辑
    Del1() {
      this.flag = !this.flag;
    },
    // 编辑中
    Del2() {
      this.flag = !this.flag;
    },
    // 查询用户所有购物车数据
    myThing(item) {
      let tokenString = localStorage.getItem("token_list");
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        tokenString: tokenString,
      };
      let bodystr = "";
      for (var key in d) {
        bodystr += key + "=" + d[key] + "&";
      }
      this.axios("/findAllShopcart", {
        method: "GET",
        params: d,
      })
        .then((res) => {
          console.log("查询用户所有购物车数据接口", res);
          let picurl = res.data.result;
          picurl.forEach((item) => {
            item.checked = false;
            this.sid.push(item.sid);
            console.log("sid",this.sid);
          });
          this.picurl = picurl;
          console.log(this.picurl);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 全选
    checkedAll() {
      if (this.isAllChecked) {
        this.result = this.picurl.map((item) => item.pid);
      } else {
        this.result = [];
      }
    },
    // 单选
    selectGoods(e) {
      this.picurl.forEach((item) => {
        if (item.checked) {
          item.checked = false;
        } else {
          item.checked = true;
        }
      });
      console.log("result的结果", this.result);
    },
    // 立即结算
    onSubmit() {
      let tokenString = localStorage.getItem("token_list");
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        tokenString: tokenString,
        sids: JSON.stringify(this.sid),
        phone: "19120617250",
        address: "广东省广州市天河区珠吉路60号",
        receiver: "秦露",
      };
      let bodystr = "";
      for (var key in d) {
        bodystr += key + "=" + d[key] + "&";
      }
      this.axios("/pay", {
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
        data: bodystr,
      })
        .then((res) => {
          console.log("这是立即结算", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除购物车商品
    delCart(){
      let tokenString = localStorage.getItem("token_list");
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        tokenString: tokenString,
        sids: JSON.stringify(this.sid),
      };
      let bodystr = "";
      for (var key in d) {
        bodystr += key + "=" + d[key] + "&";
      }
      this.axios("/deleteShopcart", {
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
        data: bodystr,
      })
        .then((res) => {
          console.log("这是删除购物车数据接口", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    if (!this.user_token) {
      this.user_token = localStorage.getItem("token_list");
      console.log(this.user_token);
    } else {
      this.user_token = null;
      console.log(this.user_token);
    }
    this.myThing();
  },
};
</script>